Problems

In order to build a custom layout for <Admin layout>, developers must clone props:

// in src/MyLayout.js
import { Layout } from 'react-admin';
import { MyAppBar } from './MyAppBar';

export const MyLayout = props => (
   <Layout {...props} appBar={MyAppBar} />
);

Developers wonder: what is props? What's its type? Why do I have to pass it down? It’s not so usual in modern React.

The same happens for other components that can be set on <Layout>: appBar, menu, error, catchAll.

Solution

The only useful data injected is title and dashboard. The rest is useless as the data can be obtained in another way.

Use a context instead of props injection for these values. That way, a custom layout just needs to pass the children down (which requires no explaining).

// in src/MyLayout.js
import { Layout } from 'react-admin';
import { MyAppBar } from './MyAppBar';

export const MyLayout = ({ children }) => (
  <Layout appBar={MyAppBar}>
     {children}
  </Layout>
);

Also, remove deprecated prop injection as there are alternatives.

Tasks

• Remove prop injection in layout
• Remove prop injection in menu
• Remove prop injection in appBar
• Remove prop injection in error
• Remove prop injection in catchAll
• Change types to reflect that
• Update documentation and jsDoc
• Fix outdated props injection in jsDoc snippets
• Write Upgrade guide